/**
 * AlbumDialog module
 */

 import eventHelper from "../../../util/EventHelper";

 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var Upload = require("../../../util/upload/Upload");
 var dataProvider = require("../provider/dataProvider");
 var React = require("react");
 var AlbumDialog = React.createClass({
    getInitialState: function (){
        return {
            fileUploaded: false,
            carousels:[]
        }
    },
    getInitialProps: function (){
        return {
            root: {},
            isEdit: false
        }
    },
    updateUploaded: function (uploaded){
        this.setState({ fileUploaded: !uploaded });
    },
    componentWillMount: function (){
        var data = this.props.root.state.status.data;
        var carousels = data.action ? data.action.carousel: [];
        this.form = {
            model: {
                carousels: carousels || []
            }
        };
        this.setState({carousels:carousels})
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnSubmit: function (){
        var root = this.props.root,
            widgets = this.refs.upload.getBuildWidgets(),
            data = widgets[0];

        root.closeDialog();
        var isEdit = storage.data.is_edit_album;
        if (isEdit){
            var id = storage.data.selectedWidgetId;
            var widget = dataProvider.getSpecifyWidgetById(id);
            widget.action.carousel = this.state.carousels;
            widget = $.extend({}, widget, data);
            widget.propertyChanged = true;
            root.updateSpecifyWidget(widget);
            root.setState({
                selectedWidget: widget
            });
            eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, widget);
        } else {
            root.addWidgetToPage(data);
        }
    },
    handleOnRemoveCarousel: function(e){
        var carousels = this.state.carousels;
        var className = "ca-remove";
        var element = $(e.target || e.srcElement);
        element = element.hasClass(className) ? element : element.parents("." + className);
        var index = element.attr("name");
        carousels.splice(index,1);
        this.setState({carousels:carousels})
    },
    render: function (){
        var root = this.props.root;

        var rStyle = {
            top: "50%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius:'5px',
            overflow:'hidden'
        };

        var uploadOpts = {
            maxFiles: 99,
            acceptedFiles: "image/jpg,image/jpeg,image/png",
            size: 10 * 1024 * 1024,
        };

        var self = this;
        var carousels = this.state.carousels;
        var disabled = carousels.length ? false : !this.state.fileUploaded;
        return (
            <dialog id="albumDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <form noValidate　name="form.name" className="form-horizontal">
                        <div className="widget-form-title">
                            <label>{$._("Upload album")}</label>
                        </div>
                        <div className={(disabled ? "" : "carousel-groups") + " carousel-group"}>
                            <Upload ref="upload" prefix="albumDialog" options={uploadOpts} type={consts.WIDGET_TYPE.ALBUM} root={root} dialog={this} data={carousels}/>
                        </div>
                        <div className="form-group buttons">
                            <button type="button" disabled={disabled} onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </form>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = AlbumDialog;
